<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="test"></div>
    <div id="test2"></div>

    <!-- 引入核心库 -->
    <script type="text/javascript" src="./React-js/16.8/react.development.js"></script>
    <!-- 用于支持react操作DOM -->
    <script text="text/javascript" src="./React-js/16.8/react-dom.development.js"></script>
    <!-- 用于将jsx转换为js -->
    <script text="text/javascript" src="./React-js/16.8/babel.min.js"></script>

    <script type="text/babel">
        const myId = 'song'
        const myData = 'HELLO'
        const VDOM = (
            <div>
                <h1 className="box" id={myId}>
                    <span style={{ color: 'red', fontSize: '40px' }}>{myData.toLocaleLowerCase()}</span>
                </h1>
                <input type="text" />
            </div>

        )
        // 渲染虚拟DOM到页面（后面的会替换之前）
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
    /*
    jsx语法规则:
    1.定义虚拟DOM时，不要写引号。
    2.标签中混入JS表达式时要用{}-
    3.样式的类名指定不要用class，要用className.
    4.内联样式,要用style={{key : value}}的形式去写。
    5.只有一个根标签
    6.标签必须闭合7.标签首字母
    (1).若小写字母开头，则将改标签转为htm1中同名元素，若htm1中无该标签对应的同名元素，则报错。
    (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

    */

</body>

</html>